<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Demo</title>
    <!-- @@@@@加载Leaflet文件 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
    <!-- @@@@@加载轻量型jQuery文件 -->
    <script src="jquery-3.2.1.min.js"></script>

    <!-- @@@@@加载移动鼠标获得经纬度的文件== -->
    <link rel="LeafletMousePosition/L.Control.MousePosition.css" />
    <script src="LeafletMousePosition/L.Control.MousePosition.js"></script>

    <!-- @@@@@加载点击获得经纬度的文件== -->
    <link rel="stylesheet" href="src/leaflet-locationpicker.css" />
    <script src="src/leaflet-locationpicker.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="esri-leaflet-v3.0.8/esri-leaflet.js"></script>
    <script src="esri-leaflet-v3.0.8/esri-leaflet-vector.js"></script>

    <!--@@@@@加载画图控件文件-->
    <link rel="stylesheet" href="dist/leaflet-geoman.css" />
    <script src="dist/leaflet-geoman.min.js"></script>

    <!-- @@@@@网页样式表 -->
    <style>
        html,
        body {
            font-family: Arial, Verdana;
            background-color: #eef1ef;
            font-size: 16px;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .wrapper {
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            height: 70%;
            width: 45%;
            float: left;
            margin-top: 0.5%;
            margin-right: 0.5%;
            z-index: 100;
        }

        #locationpicker {
            height: 25%;
            width: 50%;
            margin-bottom: 0.5%;
            margin-left: 1%;
            z-index: 100;
        }

        #geoloc5 {
            margin-bottom: 0.5%;
            z-index: 100;
        }

        #chart-container {
            width: 100%;
            height: 30%;
            margin: 0% 0% 0% 0%;
            /* 上右下左 */
            float: left;
        }

        #ArcGISmapContainer {
            height: 70%;
            width: 45%;
            margin-top: 0.5%;
            float: left;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- <div id="locationpicker">
            <form id="fixedContAlwaysOpen">
                Fixed container and always open map: <br />
                <div style="min-height: 140;min-width: 200;">
                    <input id="geoloc5" type="text" value="" size="20" />
                    <div id="fixedMapCont" style="border: 1px solid black; min-height: 140;min-width: 200;"></div>
                </div>
            </form>
        </div> -->
        <div id="mapContainer">

        </div>
        <div id="ArcGISmapContainer"></div>
        <div id="chart-container"></div>
    </div>

    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script> -->

    <script type="text/javascript">
        var map = L.map('mapContainer').setView([32.180188, 118.697804], 16);   //L.map(div的ID).setView[纬度，经度],缩放（大小）层级
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar' },
            {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }
        ).addTo(map);//添加地图到定义的map里面
        L.control.mousePosition().addTo(map);   //移动鼠标动态获得经纬度

        L.marker([32.180188, 118.697804], { pmIgnore: true }).addTo(map); //添加地图标签
        ;
        // add Leaflet-Geoman controls with some options to the map  
        map.pm.addControls({
            position: 'topleft',
            drawCircle: false,
        });
        // make polygon not snappable during draw  
        map.pm.enableDraw('Polygon', { snappable: false });
        map.pm.disableDraw();
        // disable Draw Mode
        map.pm.disableDraw();
        // 点击获得经纬度（leaflet-locationpackers）
        // $('#geoloc5').leafletLocationPicker({
        //     alwaysOpen: true,
        //     mapContainer: "#fixedMapCont"
        // });
    </script>

    <!-- ==Echarts== -->
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="js/Echarts.js">    //Echarts图表JS文件
    </script>

    <!-- ==ArcGISMap== -->
    <script src="js/EsriLeaflet_Switchingbasemap.js">
    //选择多种基础图层（地图定义在了EsriLeaflet_Switchingbasemap.js文件中）
    </script>
    <script>
        // var map = L.map('ArcGISmapContainer').setView([30.70, -81.47], 12);
        // L.esri.tiledMapLayer({
        //     //AecGIS地图服务链接
        //     url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
        // }).addTo(map);
    </script>
    <!-- == -->
    <script type="text/javascript">

    </script>

</body>

</html>